<template>
  <div>
    <button @click="fetchData">获取</button>
    <h1>B</h1>
    <div v-if="people">
      <div class="timeline">
        <div class="vertical-line"></div> <!-- 添加竖线 -->
        <div
          v-for="(person, index) in people"
          :key="index"
          class="timeline-entry"
        >
          <div class="entry">
            <div class="date-time">
              <span class="date">{{ person.date }}</span>
              <span class="timestamp">{{ person.timestamp }}</span>
            </div>
            <div class="circle"></div>
            <div class="name-age">
              <div class="name">{{ person.name }}</div>
              <div class="age">{{ person.age }}岁</div>
            </div>
          </div>
          <div v-if="index < people.length - 1" class="divider"></div>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
export default {
  name: 'PersonTimeline',
  data() {
    return {
      people: null, // 修改为 null
    };
  },
  methods: {
    fetchData() {
      fetch('./data.json')
        .then(response => response.json())
        .then(data => {
          this.people = data;
        })
        .catch(error => {
          console.error('Error fetching data:', error);
        });
    },
    parseDate(dateString) {
      const year = dateString.substring(0, 4);
      const month = dateString.substring(4, 6);
      const day = dateString.substring(6, 8);
      return `${year}/${month}/${day}`;
    }
  }
};
</script>

<style scoped>
.timeline {
  font-family: 'Arial', sans-serif;
  padding: 20px;
  background-color: #fff;
  position: absolute; /* 添加这一行 */
  right: 21%; /* 添加这一行 */
  top: 40%; /* 添加这一行 */
  transform: translateY(-50%); /* 添加这一行 */
}

.timeline-entry {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.entry {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.date-time {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-right: 20px;
}

.name-age {
  flex: 1;
  display: flex;
  flex-direction: column; /* 修改为 column，使姓名和年龄在垂直方向上排列 */
  align-items: center; /* 使姓名和年龄垂直居中 */
  justify-content: space-between; /* 使姓名和年龄在水平方向上分开 */
}

.circle {
  background-color: #0056b3; /* 修改为蓝色 */
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin: 0 15px;
}

.vertical-line {
  position: absolute;
  top: 0;
  right: 78px;
  width: 1px;
  height: 100%; /* 调整为您需要的高度 */
  background-color: #0056b3; /* 修改为蓝色 */
}

button {
  margin-top: 50px; /* 增加顶部间距 */
  right: 44%; /* 居中 */
  position: absolute; /* 添加这一行 */
  transform: translateY(-50%); /* 添加这一行 */
  background-color: #007BFF; /* 设置背景色为深蓝色 */
  color: white; /* 设置文字颜色为白色 */
  border-radius: 10px; /* 设置圆角 */
  border: none; /* 移除边框 */
  padding: 10px 20px; /* 设置内边距，可以根据需要调整 */
  font-size: 16px; /* 设置字体大小 */
  font-weight: bold; /* 设置字体为粗体 */
  transition: all 0.3s ease; /* 添加过渡效果 */
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1); /* 添加阴影 */
}

button:hover {
  background-color: #0056b3; /* 鼠标悬停时改变背景色 */
  box-shadow: 0px 15px 20px rgba(0, 0, 0, 0.2); /* 鼠标悬停时改变阴影 */
  transform: translateY(-3px); /* 鼠标悬停时按钮上移 */
}

h1 {
  margin-top: 10px; /* 增加顶部间距 */
  font-size: 36px; /* 设置字体大小 */
  font-weight: bold; /* 设置字体为粗体 */
  right: 25%; /* 添加这一行，使文本居中 */
  position: absolute; /* 添加这一行 */
}

</style>